<template>
    <div class="transfer-order-page">
      <!-- 顶部导航标签 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item><a href="/">新手引导</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="/customer">客户</a></el-breadcrumb-item>
        <el-breadcrumb-item>调拨单记录</el-breadcrumb-item>
        <el-breadcrumb-item>其他入库单记录</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 查询条件区域 -->
      <el-form :model="searchForm" inline label-width="80px" class="search-form">
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select v-model="searchForm.businessType" placeholder="请选择业务类型">
            <el-option label="调拨入库" value="transfer-in" />
            <el-option label="调拨出库" value="transfer-out" />
            <el-option label="其他入库" value="other-in" />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库">
          <el-input v-model="searchForm.warehouse" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        
      </el-form>
  
      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{ background: '#f8f9fa' }"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="operation" label="操作" width="100">
          <template #default="scope">
            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="billDate" label="单据日期" width="120" />
        <el-table-column prop="billNo" label="单据编号" width="150" />
        <el-table-column prop="businessType" label="业务类型" width="120" />
        <el-table-column prop="businessTypeName" label="业务类型名称" width="120" />
        <el-table-column prop="quantity" label="数量" width="100" />
        <el-table-column prop="warehouse" label="仓库" width="120" />
        <el-table-column prop="supplier" label="供应商" width="120" />
        <el-table-column prop="salesman" label="业务员" width="100" />
        <el-table-column prop="creator" label="制单人" width="100" />
        <el-table-column prop="approver" label="审核人" width="100" />
        <el-table-column prop="orderStatus" label="订单状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.orderStatus)">{{
              scope.row.orderStatus
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column prop="printCount" label="打印次数" width="100" />
        <el-table-column prop="relatedOrderNo" label="关联物流单号" width="180" />
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        style="margin-top: 20px; text-align: right"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElBreadcrumb, ElBreadcrumbItem, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput, ElButton, ElTable, ElTableColumn, ElTag, ElPagination } from 'element-plus'
  import { useRouter } from 'vue-router'
  
  // 响应式数据
  const searchForm = ref({
    dateRange: ['2025-06-01', '2025-06-26'], // 默认日期范围
    businessType: '', // 业务类型
    warehouse: '', // 仓库
  })
  const tableData = ref([
    // 模拟数据，实际可通过接口获取
    {
      operation: '',
      billDate: '2025-06-01',
      billNo: 'DB20250625001',
      businessType: 'transfer-in',
      businessTypeName: '调拨入库',
      quantity: 100,
      warehouse: '主仓库',
      supplier: '供应商A',
      salesman: '业务员A',
      creator: '制单人A',
      approver: '审核人A',
      orderStatus: '已审核',
      remark: '无',
      printCount: 1,
      relatedOrderNo: 'LOG20250601001',
    },
    {
      operation: '',
      billDate: '2025-06-02',
      billNo: 'DB20250625002',
      businessType: 'transfer-out',
      businessTypeName: '调拨出库',
      quantity: 80,
      warehouse: '分仓库1',
      supplier: '供应商B',
      salesman: '业务员B',
      creator: '制单人B',
      approver: '审核人B',
      orderStatus: '待审核',
      remark: '备注2',
      printCount: 0,
      relatedOrderNo: 'LOG20250602002',
    },
  ])
  const pageInfo = ref({
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页条数
    total: 2, // 总条数（模拟）
  })
  const router = useRouter()
  
  // 方法
  const handleSearch = () => {
    console.log('查询条件:', searchForm.value)
    // 实际可调用接口：axios.post('/api/transfer-order/search', searchForm.value)
  }
  
  const handleReset = () => {
    searchForm.value = {
      dateRange: ['2025-06-01', '2025-06-26'],
      businessType: '',
      warehouse: '',
    }
  }
  
  const handleView = (row) => {
    router.push({ name: 'TransferOrderDetail', params: { id: row.billNo } })
  }
  
  const handleEdit = (row) => {
    router.push({ name: 'TransferOrderEdit', params: { id: row.billNo } })
  }
  
  const handleSizeChange = (val) => {
    pageInfo.value.pageSize = val
    // 实际调用接口更新数据：axios.get(`/api/transfer-order?pageSize=${val}`)
  }
  
  const handleCurrentChange = (val) => {
    pageInfo.value.currentPage = val
    // 实际调用接口更新数据：axios.get(`/api/transfer-order?currentPage=${val}`)
  }
  
  const getStatusTagType = (status) => {
    switch (status) {
      case '已审核':
        return 'success'
      case '待审核':
        return 'warning'
      case '已取消':
        return 'danger'
      default:
        return 'info'
    }
  }
  
  // 初始化
  onMounted(() => {
    // 实际项目中可调用接口获取数据：axios.get('/api/transfer-order')
  })
  </script>
  
  <style scoped>
  .transfer-order-page {
    padding: 20px;
    background-color: #fff;
    min-height: calc(100vh - 64px); /* 适配导航栏高度 */
    height: 800px;
  }
  
  .breadcrumb {
    margin-bottom: 16px;
  }
  
  .search-form {
    margin-bottom: 16px;
  }
  
  .el-table {
    --el-table-header-text-color: #666;
  }
  </style>